<template>
	<view>
		<carHeader :title="'汽车保养'"></carHeader>

		<!-- 服务评价 -->
		<view class="info" style="margin-top: 30rpx;">
			<!-- 第一个卡片上方内容 -->
			<view class="info-title">
				<view style="font-size: 36rpx;color: #242424;">服务评价</view>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<view class="top">
				<image src="/static/车联网服务-08我的-01我的订单-11立即评价_slices/评价.png"></image>
				<view class="right">
					<view>车百事汽车生活馆</view>
					<uni-rate v-model="rateValue" @change="onChange" />
				</view>
			</view>
		</view>
		<!-- 评语 -->
		<view class="info" style="margin-top: 30rpx;">

			<view class="info-title">
				<view style="font-size: 36rpx;color: #242424;">
					评语
					<text class="t1">(0-299字)</text>
				</view>
				
			</view>
			<view>
				
				<uni-easyinput type="textarea" v-model="value" placeholder="请留下您宝贵的意见和建议......"></uni-easyinput>
			</view>


		</view>

		<!-- 照片 -->
		<view class="info" style="margin-top: 30rpx;">
			<!-- 第一个卡片上方内容 -->
			<view class="info-title">
				<view style="font-size: 36rpx;color: #242424;">
					照片
					<text class="t1">(选填)</text>
				</view>
			</view>
			<view class="example-body">
				<uni-file-picker>
					<view class="upload">
						<view>
							<uni-icons type="plusempty" size="20"></uni-icons>
						</view>
						<view >上传照片</view>
					</view>

					
				</uni-file-picker>
			</view>

		</view>

		<view class="submit-btn" @click="handleClick">提交</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rateValue: 0,
			};
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			handleClick() {
				// 按钮点击后的处理逻辑  
				console.log('按钮被点击了');
			}
		}
	}
</script>

<style lang="scss">
	
	// 订单信息卡片
	.info {
		background-color: white;
		color: #414141;
		width: 84%;
		margin: 0 auto;
		padding: 35rpx;
		position: relative;
		top: -230rpx;
		border-radius: 20rpx;

	}

	.t1 {
		font-size: 25rpx;
		font-weight: 500;
	}

	//分割线
	.line {
		margin: 20rpx 0;
		height: 4px;
		/* 分割线的高度 */
		background-color: #F7F7F7;
		/* 分割线的颜色 */
	}

	.top {
		display: flex;
		justify-content: space-between;

		image {
			width: 300rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}

	.info-title {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	// 订单信息展示的内容
	.info-content {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #3D3D3D;

	}

	.uni-mt-5 {
		margin-top: 5px;
		
	}

	.upload {
		font-size: 25rpx;
	}

	.right {
		position: relative;
		top: 60rpx;
		left: -20rpx;
	}

	.submit-btn {
		/* 设置按钮的样式 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 250px;
		/* 按钮宽度，可以根据需要调整 */
		height: 40px;
		/* 按钮高度，可以根据需要调整 */
		background-color: #007AFF;
		/* 按钮背景色，这里使用了蓝色 */
		color: #FFFFFF;
		/* 文字颜色，这里使用了白色 */
		border-radius: 20px;
		/* 边框圆角 */
		margin-left: 80rpx;
	}

	.upload{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>